import { useState, useContext, useEffect, useLayoutEffect } from "react"

const MlContext = React.createContext();
const { Provider, Consumer } = MlContext;

// const Child = props => {
//   return (
//     <Consumer>
//       {
//         ctx => {
//           return (
//             <div>
//               <h3>函数式组件</h3>
//               <h4>{ctx}</h4>
//             </div>
//           )
//         }
//       }
//     </Consumer>
//   )
// }

const Child = props => {
  let ctx = useContext(MlContext)
  return (
    <div>
      <h3>函数式组件</h3>
      <h4>{ctx}</h4>
    </div>
  )
}



const A = props => {
  return (
    <Provider value={"1000万"}>
      <div>
        <h2>函数式组件</h2>
        <hr />
        <Child></Child>
      </div>
    </Provider>
  )
}

export default A;
